// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

import BaseView from "../base/BaseView";
import KLineTrendComponent from "../base/components/KLineTrendComponent";
import RankTrendComponent from "../base/components/RankTrendComponent";
import { ThsRankData } from "./models/ThsRankData";

const {ccclass, property} = cc._decorator;

@ccclass
export default class RankTrendView extends BaseView {

    @property(cc.Label)
    labelName: cc.Label = null;

    @property(cc.Label)
    labelText: cc.Label = null;

    @property(cc.Prefab)
    rankTrendPrefab: cc.Prefab = null;

    @property(cc.Prefab)
    klineTrendPrefab: cc.Prefab = null;

    @property(cc.Node)
    rankLayer: cc.Node = null;

    @property(cc.Node)
    klineLayer: cc.Node = null;

    selectNode: any = '';

    _selectIndex: number = 0;

    thsRank: ThsRankData = null;
    
    rankTrend: RankTrendComponent = null;

    klineTrend: KLineTrendComponent = null;

    @property(cc.Label)
    startDate: cc.Label = null;
    
    @property(cc.Label)
    endDate: cc.Label = null;

    onLoad () {
        this.thsRank = ThsRankData.getInstance();

        let rankNode = cc.instantiate(this.rankTrendPrefab);
        this.rankLayer.addChild(rankNode);
        this.rankTrend = rankNode.getComponent(RankTrendComponent);

        let klineNode = cc.instantiate(this.klineTrendPrefab);
        this.klineLayer.addChild(klineNode);
        this.klineTrend = klineNode.getComponent(KLineTrendComponent);
    }

    protected onEnable(): void {
        this.node.on(cc.Node.EventType.MOUSE_WHEEL, this.onMouseWheel, this, true);
        cc.director.on('ClickKLineNode', this.onClickKLineNode, this);
    }

    protected onDisable(): void {
        this.node.off(cc.Node.EventType.MOUSE_WHEEL, this.onMouseWheel, this, true);
        cc.director.off('ClickKLineNode', this.onClickKLineNode, this);
    }

    onClickKLineNode (info) {
        this.createDialog(BaseView.Views.KLineNodeView, info, true);
    }

    onMouseWheel (event) {
        let y = event.getScrollY();
        let plateType = this.selectNode.plateType;
        let list = this.thsRank.getPlatelist(plateType);
        let select = 0;
        for (let index = 0; index < list.length; index++) {
            const item = list[index];
            if (this.selectNode.ts_code == item.ts_code) {
                select = index;
            }
        }

        if (y > 0) {
            this.onBtnUp();
        } else {
            this.onBtnDown();
        }
    }

    onBtnDown () {
        this._selectIndex++;
        let plateType = this.selectNode.plateType;
        let list = this.thsRank.getPlatelist(plateType);
        if (this._selectIndex >= list.length) {
            this._selectIndex = list.length - 1;
        }
        this.selectNode = list[this._selectIndex];
        this.updateView();
    }

    onBtnUp () {
        this._selectIndex--;
        let plateType = this.selectNode.plateType;
        let list = this.thsRank.getPlatelist(plateType);
        if (this._selectIndex < 0) {
            this._selectIndex = 0;
        }
        this.selectNode = list[this._selectIndex];
        this.updateView();
    }

    show(nodeInfo: any): void {
        super.show(nodeInfo);
        this.node.active = true;
        let name = nodeInfo.name;
        this.labelName.string = name;
        this.selectNode = nodeInfo;
        let plateType = nodeInfo.plateType;
        let list = this.thsRank.getPlatelist(plateType);
        let select = 0;
        for (let index = 0; index < list.length; index++) {
            const item = list[index];
            if (nodeInfo.ts_code == item.ts_code) {
                select = index;
                break;
            }
        }

        this._selectIndex = select;

        setTimeout(() => {
            this.updateView();
        }, 10);
    }

    updateView () {
        let rankData = this.thsRank.getRankData(this.selectNode.ts_code);
        this.labelName.string = rankData.name;
       
        let list = rankData.list;
        let curDate = list[list.length - 1];
        let stocks = this.thsRank.getPlateStocks(this.selectNode.ts_code);
        this.labelText.string = `最新成交量${Math.floor(curDate.amount / 100000000)}亿 总市值:${Math.floor(curDate.total_mv / 100000000)}亿 成分股数量：${stocks.length}`
        let nodeWidth = Math.floor((this.node.width - 150) / (list.length + 1));
        if (nodeWidth < 10) {
            nodeWidth = 10;
        } 

        if (nodeWidth > 40) {
            nodeWidth = 40;
        }

        this.startDate.string = list[0].date.slice(4,8);
        this.endDate.string = list[list.length - 1].date.slice(4,8);
        this.startDate.node.x = nodeWidth;
        this.endDate.node.x = nodeWidth * list.length;

        this.rankTrend.setData(rankData, nodeWidth);
        this.klineTrend.setData(rankData, nodeWidth, 50);
    }

    onBtnClose () {
        this.node.active = false;
    }

    onSelectChange (nodeInfo) {
        this.selectNode = nodeInfo;
        this.updateView();
    }

    onBtnName () {
        let params = {
            selects: [],
            callback: (plateNode) => {
                this.onSelectChange(plateNode);
            },
            isSingle: true,
        };
        this.createDialog(BaseView.Views.SelectPlateView, params);
    }

    onBtnLookStocks () {
        let stocks = this.thsRank.getPlateStocks(this.selectNode.ts_code);
        this.createDialog(BaseView.Views.LookStocksView, stocks);
    }

    // update (dt) {}
}
